<template>
  <div class="message_box" v-show="isShow">
    <el-form
      :model="questionForm"
      ref="questionForm"
      :rules="rules"
      class="questionForm"
      label-width="90px"
    >
      <el-form-item label="问题" prop="question">
        <el-input
          type="textarea"
          :rows="3"
          v-model="questionForm.question"
          placeholder="请输入问题"
        ></el-input>
      </el-form-item>
      <el-form-item label="答案" prop="answer">
        <el-input
          type="textarea"
          :rows="3"
          v-model="questionForm.answer"
          placeholder="请输入答案"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('questionForm')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <span class="el-icon-circle-close" @click="close"></span>
  </div>
</template>

<script>
export default {
  name: "MessageBox",
  components: {},
  data() {
    return {
      isShow: false,
      questionForm: {
        question: "",
        answer: "",
      },
      rules: {
        question: [{ required: true, message: "请输入问题", trigger: "blur" }],
        answer: [{ required: true, message: "请输入答案", trigger: "blur" }],
      },
    };
  },
  methods: {
    edit() {
      this.isShow = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close() {
      this.isShow = false;
    },
  },
};
</script>

<style scoped>
.message_box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10000;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 340px;
  padding: 25px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 10px;
}

.questionForm {
  margin-top: 30px;
}

.questionForm >>> .el-form-item {
  width: 600px;
}

.el-button--primary {
  background-color: #4361a7;
  border-color: #4361a7;
  color: #fff;
}

.el-button--primary:hover {
  background-color: #5177ce;
  border-color: #5177ce;
  color: #fff;
}

.el-icon-circle-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10001;
  font-size: 18px;
  color: #8f9395;
}

.el-icon-circle-close:hover {
  color: #002766;
  cursor: pointer;
}
</style>
